﻿<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/moment.min.js"></script>
    <style>
        .messages{ width: 90%;margin: 20px auto;}
         .message-item {
             display: flex;
         }
          .message-item.answer {
             align-items: flex-start;
             justify-content: flex-start;
         }   
          .message-item.question {
             align-items:flex-end;
             justify-content: flex-end;
         }
          .message-item.question .baseinfo {
              order: 2;
          }
           .message-item.question .details {
              order: 1;
          }
         .message-item .baseinfo {
             width: 60px;
         }
         .message-item .baseinfo .icon{
             width: 48px;
             height: 48px;
             font-size: 40px;
         }
         .message-item .details {background: #fff;
             margin: 5px 20px;
             border: 1px solid #eeeeee;
             border-radius: 8px;
             padding: 10px 15px;
             position: relative;
         }
         .message-item .details .arraw {
             position: absolute;
             width: 12px;
             height: 12px;overflow: hidden;
             transform:rotate(45deg);background: #fff;
             left: -6px;
             top: 15px;
             border-top: none;
             border-right: none;
             border-bottom: 1px solid #eeeeee;border-left: 1px solid #eeeeee;
         }
           .message-item.question .details .arraw{
               right:  -6px;
               left: auto;
               top: auto;
               bottom: 15px;
               border-top: 1px solid #eeeeee;
               border-right: 1px solid #eeeeee;
               border-bottom: none;border-left: none;
           }
            .message-item .details .pocesslink {
                margin: 25px 15px 10px;
                
                padding: 8px 15px;
            }
    </style>
</head>
<body>
<div id="vue-root">
    <div class="messages">
        <!--<textarea v-model="currentQuestion" style="width: 90%"></textarea>
        <button type="button" v-on:click="question()">提交</button>-->
        <template v-for="(msg,index) in messages">
            <div class="message-item" v-bind:class="{'question':(msg.type=='Q'),'answer':(msg.type=='A')}">
                <div class="baseinfo" v-on:click="iconClick(msg)">
                    <span class="icon"><img v-bind:src="'./images/'+msg.icon"/></span>
                    <span class="time">{{msg.time | datetime('HH:mm:ss')}}</span>
                </div>
                <div class="details">
                    <div class="arraw">&nbsp;</div>
                    <div class="content" v-html="msg.content"></div>

                    <div class="msg-ext" v-show="msg.ext.Type && msg.ext.Type.length>0">
                        <hr style="border-color: #dddddd"/>
                        <a class="pocesslink" href="javascript:void(0)" v-on:click="pocessPara(msg.ext)">
                            <label v-show="msg.ext.Type=='OpenPdf'">打开Pdf</label>
                            <label v-show="msg.ext.Type=='OpenUrl'">打开网页</label>
                        </a>
                    </div>
                </div>
            </div>
        </template>
        <div style="height: 200px;">&nbsp;</div>
    </div>
</div>
<script>
    Vue.filter('datetime', function (value, format) {
        if (value <= 0) return '';
        if (!format) {
            format = "HH:mm:ss";
        }
        return moment(value).format(format);
    });
    var vm = new Vue({
        el: '#vue-root',
        data: {
            currentQuestion: '',
            isRecording:false,
            messages: [],
            noword:0
        },
        methods: {
            iconClick: function (msg) {
                if (msg.type === "Q") {
                    if (msg.icon === 'record.gif') {
                        vm.endRecord();
                        if (this.currentQuestion.length > 0) {
                            vm.question();
                        } else {
                            //setTimeout(function() {
                                window.external.StartNewRecord();
                            //}, 0);
                        }
                    }
                } else if (msg.type === "A") {
                    if (msg.icon === 'speak.gif') {
                        vm.endSpeak();
                        window.external.StopCurrentSpeak();
                    }
                }
            },
            question: function () {
                var that = this;
                var answerRes = window.external.GetAnswer(this.$data.currentQuestion);
                if (answerRes) {
                    var answer = JSON.parse(answerRes);
                    var ext = {
                        Action: answer.Action,
                        Type: answer.Type,
                        Value: answer.Value,
                        Answer: answer.answer
                    };
                    this.addQuestion(answer.quest);
                    this.addAnswer(answer);
                    that.speak(answer.answer);
                    
                    if (ext.Type && ext.Type.length>0) {
                        window.external.ProcessBeforePara(JSON.stringify(ext));
                    }
                }
                this.currentQuestion = "";
            },
            speak:function(text) {
                window.external.SpeakText(text);
                var lastMsg = this.messages[this.messages.length - 1];
                if (lastMsg) {
                    if (lastMsg.icon === "A.png") {
                        lastMsg.icon = "speak.gif";
                    }
                }
            },
            endSpeak:function() {
                var lastMsg = this.messages[this.messages.length - 1];
                if (lastMsg) {
                    lastMsg.icon = 'A.png';
                }
            },
            pocessPara: function (ext) {
                var para = JSON.stringify(ext);
                window.external.ProcessPara(para);
            },
            addQuestion: function (question) {
                if (question.length < 1)return;
                this.messages.push({
                    type: 'Q',
                    icon:'Q.png',
                    content: question,
                    ext:{},
                    time:moment().valueOf()
                });
                this.$nextTick(function() {
                    window.scrollTo(0, document.body.scrollHeight);
                });
            },
            addAnswer: function (answer) {
                var ext = {
                    Action: answer.Action,
                    Type: answer.Type,
                    Value: answer.Value,
                    Answer: answer.answer
                };
                this.messages.push({
                    type: 'A',
                    icon: 'A.png',
                    content: answer.answer,
                    ext:ext,
                    time: moment().valueOf()
                });
                this.scrollToBottom();
            },
            scrollToBottom:function() {
                this.$nextTick(function () {
                    window.scrollTo(0, document.body.scrollHeight);
                });
            },
            
            startRecord: function () {
                if (this.isRecording) {
                    this.isRecording = false;
                    this.endRecord();
                }
                this.currentQuestion = "";
                this.isRecording = true;
                this.messages.push({
                    type: 'Q',
                    icon: 'record.gif',
                    content: "...",
                    ext: {},
                    time: moment().valueOf()
                });
                this.scrollToBottom();
            },
            recordWord: function (word) {
                this.currentQuestion += word;
                var lastMsg = this.messages[this.messages.length - 1];
                if (lastMsg) {
                    if (lastMsg.content === "...") {
                        lastMsg.content = word;
                    } else {
                        lastMsg.content += word;
                    }
                }
            },
            endRecord: function () {
                this.isRecording = false;
                this.messages.splice(this.messages.length - 1, 1); //删除最后一条
                
            }
        }
    });
    // 由C# 调用
    // C# 识别语音后把文字传送过来
    function setCurrentQuestion(question) {
        if (vm.isRecording) {
            vm.endRecord();
        }
       
        vm.currentQuestion = question;
        vm.question();
        return true;
    }

    function endSpeak() {
        vm.endSpeak();
    }
    function endRecord() {
        vm.endRecord();
    }
    function recording(text) {
        vm.recordWord(text);
    }
    function startRecord() {
        vm.startRecord();
    }
</script>
</body>
</html>